<template>
  <layout :title-url="titleUrl">
    <el-row>
      <el-col :span="6">
        <div class="grid-content content-left">
          <div class="grid-content-1 content-left-top">
            <div class="content-left-box">
              <div class="content-data-display" v-for="(list,index) in dataDisplay">
                <img :src="list.img">
                <p>{{list.name}}</p>
                <span :class="'data-color'+index">{{list.data}}</span>
              </div>
            </div>
          </div>
          <div class="grid-content-2 content-left-center" ref="carouselHeight">
            <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside"
                         :height="leaderboardHeight">
              <el-carousel-item v-for="item in 2" :key="item">
                <mod-title :title="item === 1 ? '各地市登录次数排行榜' :'各县区登录次数排行榜'"></mod-title>
                <div class="leaderboard" v-for="(list,index) in (item === 1 ? dataLeaderboard0 :dataLeaderboard1)">
                  <div class="leaderboard-list">
                    <div class="leaderboard-list-circleborder"
                         :class="index < 3 ?'leaderboard-list-circleborder'+index : ''">
                      <div class="leaderboard-list-circle" :class="index < 3 ?'leaderboard-list-circle'+index : ''">
                        {{index+1}}
                      </div>
                    </div>
                    <div class="leaderboard-list-box">
                      <div class="list-box-content" :class="index < 3 ?'list-box-content'+index : ''">
                        <div class="list-box-arrow" :class="index < 3 ?'list-box-arrow'+index : ''"></div>
                        {{list.name}}
                      </div>
                    </div>
                    <div class="leaderboard-list-data">{{list.value}}</div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="grid-content-2 content-left-bottom">
            <mod-title title="各部门使用情况分布"></mod-title>
            <js-pie :echartData="echartData"></js-pie>
          </div>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="grid-content content-center">
          <js-map></js-map>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content content-right">
          <div class="grid-content-2 content-right-top">
            <div class="content-right-top-box">
              <div class="content-right-list">
                <mod-title title="功能使用排行"></mod-title>
                <ul>
                  <li v-for="list in dataUseList">
                    <span class="content-right-list-name">{{list.name}}</span>
                    <span class="content-right-list-value">{{list.value}}</span>
                  </li>
                </ul>
              </div>
              <div class="content-right-list">
                <div class="content-right-list">
                  <mod-title title="个人活跃排行"></mod-title>
                  <ul>
                    <li v-for="list in dataPersonalList">
                      <span class="content-right-list-name">{{list.name}}</span>
                      <span class="content-right-list-value">{{list.value}}</span>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="grid-content-3 content-right-center" ref="areaHeight">
            <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside"
                         :height="barHeight">
              <el-carousel-item v-for="item in 3" :key="item">
                <mod-title :title="item === 1 ? '各地市检索次数（总：54698）' :item === 2 ? '各地市研判个数（总：6732827）':'各地市话单账单数据上传数（总：8273666）'"></mod-title>
                <bar-two :series-data="item === 1 ?twoData1:item === 2 ?twoData2:twoData3"
                         :x-axis-data="twoXData" v-show="item !== 3"></bar-two>
                <js-bar :phone-data="twoData3"
                        :bill-data="twoData3"
                        :x-axis-data="twoXData" v-show="item === 3"></js-bar>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="grid-content-2 content-right-bottom" ref="frequencyHeight">
            <el-carousel trigger="click" arrow="never" :interval="5000" indicator-position="outside"
                         :height="lineHeight">
              <el-carousel-item v-for="item in 2" :key="item">
                <mod-title :title="item === 1 ? '使用频率' :'12小时时间断使用情况'"></mod-title>
                <js-line :xData="item === 1 ?xDataFrequency1:xDataFrequency2"
                         :yData="item === 1 ? yDataFrequency1 :yDataFrequency2"
                         :colors="item === 1 ? colorFrequency1 :colorFrequency2"
                         :isColor='item === 1 ?isColor1:isColor2'></js-line>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </el-col>
    </el-row>
  </layout>
</template>

<style lang="scss" scoped>
  $top1color: #EA4434;
  $top2color: #FBD135;
  $top3color: #66C860;

  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      .content-left {
        /*padding-left: 70px;*/
        height: 100%;
        .content-left-top {
          height: 20%;
          position: relative;
          .content-left-box {
            width: 100%;
            position: absolute;
            bottom: 5px;
            display: flex;
            .content-data-display {
              flex: 1;
              min-width: 97px;
              text-align: center;
              img {
                width: 68px;
              }
              p {
                margin: 5px 0px 0px;
                color: #fff;
                font-size: 16px;
              }
              span {
                margin-top: 8px;
                font-size: 22px;
              }
              .data-color0 {
                color: #31C724;
              }
              .data-color1 {
                color: #FF4949;
              }
              .data-color2 {
                color: #F77E07;
              }
            }
          }
        }
        .content-left-center {
          width: 100%;
          height: 45%;
          padding-top: 5px;
          .leaderboard {
            height: 32px;
            line-height: 32px;
            .leaderboard-list {
              width: 250px;
              height: 100%;
              margin: 15px auto 0px;
              .leaderboard-list-circleborder {
                display: inline-block;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                border: 2px solid #0A49B0;
                position: relative;
                .leaderboard-list-circle {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                  width: 20px;
                  height: 20px;
                  border-radius: 50%;
                  background: #0A49B0;
                  color: #fff;
                  text-align: center;
                  line-height: 20px;
                }
                .leaderboard-list-circle0 {
                  background: $top1color;
                  color: #000;
                }
                .leaderboard-list-circle1 {
                  background: $top2color;
                  color: #000;
                }
                .leaderboard-list-circle2 {
                  background: $top3color;
                  color: #000;
                }
              }
              .leaderboard-list-circleborder0 {
                border-color: $top1color
              }
              .leaderboard-list-circleborder1 {
                border-color: $top2color
              }
              .leaderboard-list-circleborder2 {
                border-color: $top3color
              }
              .leaderboard-list-box {
                vertical-align: top;
                display: inline-block;
                margin: 0px 33px 0px 22px;
                .list-box-content {
                  position: relative;
                  height: 32px;
                  width: 84px;
                  border-radius: 3px;
                  background: #0A49B0;
                  text-align: center;
                  color: #fff;
                }
                .list-box-content0 {
                  background: $top1color;
                  color: #000;
                }
                .list-box-content1 {
                  background: $top2color;
                  color: #000;
                }
                .list-box-content2 {
                  background: $top3color;
                  color: #000;
                }
                .list-box-arrow {
                  position: absolute;
                  left: -16px;
                  top: 5px;
                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 16px solid #0A49B0;
                  border-bottom: 10px solid transparent;
                }
                .list-box-arrow0 {
                  border-right-color: $top1color;
                }
                .list-box-arrow1 {
                  border-right-color: $top2color;
                }
                .list-box-arrow2 {
                  border-right-color: $top3color;
                }
              }
              .leaderboard-list-data {
                display: inline-block;
                vertical-align: top;
                height: 32px;
                line-height: 32px;
                color: #fff;
              }
            }
          }
        }
        .content-left-bottom {
          height: 35%;
          overflow-y: hidden;
        }
      }
      .content-center {
        height: calc(100vh - 120px);
        margin-top: 100px;
      }
      .content-right {
        height: 100%;
        /*padding-right: 10px;*/
        .content-right-top {
          position: relative;
          height: 25%;
          .content-right-top-box {
            position: absolute;
            width: 100%;
            bottom: 3px;
            display: flex;
            .content-right-list {
              flex: 1;
              ul {
                margin: 0px;
                padding: 0px;
              }
              li {
                list-style: none;
                font-size: 18px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                display: flex;
                .content-right-list-name {
                  flex: 1;
                  color: #00AFFF;
                }
                .content-right-list-value {
                  flex: 1;
                  color: #F9FF4C;
                }
              }
            }
          }
        }
        .content-right-center {
          height: 45%;
          padding-bottom: 10px;
        }
        .content-right-bottom {
          height: 30%;
          overflow-y: hidden;
        }
      }
    }

  }
</style>

<script>
  import ModTitle from '../components/mod-title.vue'
  import Layout from '../components/layout.vue'
  import jsPie from '../components/js-pie'
  import jsLine from '../components/js-line'
  import JsMap from '../components/js-map.vue'
  import BarTwo from '../components/bar-two'
  import JsBar from '../components/js-bar'
  import {on} from 'element-ui/lib/utils/dom'

  export default {
    components: {
      ModTitle,
      Layout,
      jsPie,
      jsLine,
      BarTwo,
      JsBar,
      JsMap
    },
    mounted() {
      // // 动态设置背景图的高度为浏览器可视区域高度
      //
      // // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
      // this.clientHeight = `${document.documentElement.clientHeight}px`;
      // // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
      // const that = this;
      // window.onresize = function temp() {
      //   that.clientHeight = `${document.documentElement.clientHeight}px`;
      // };
      this.height = this.$refs.carouselHeight.clientHeight - 40;
      this.frequencyH = this.$refs.frequencyHeight.clientHeight - 40;
      this.areaH = this.$refs.areaHeight.clientHeight - 40;
      on(window, 'resize', this.accumulateHeight);
      on(window, 'resize', this.frequencyHeight);
      on(window, 'resize', this.getAreaHeight);
    },
    watch: {},
    computed: {
      leaderboardHeight() {
        return this.height + 'px'
      },
      lineHeight() {
        return this.frequencyH + 'px'
      },
      barHeight() {
        return this.areaH + 'px'
      }
    },
    data() {
      return {
        titleUrl: require('../assets/images/usage.png'),
        clientHeight: '',
        height: '',
        frequencyH: '',
        areaH: '',
        echartData: [
          {value: 335, name: '执纪监督'},
          {value: 310, name: '巡视巡查'},
          {value: 234, name: '派驻纪检组'},
          {value: 235, name: '信息技术保障'},
          {value: 335, name: '审查调查'}
        ],
        xDataFrequency1: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        xDataFrequency2: ['08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
        yDataFrequency1: [35, 165, 60, 58, 55, 61, 40, 20, 45, 80, 23, 45],
        yDataFrequency2: [8, 9, 16, 11, 12, 13, 14, 15, 16, 37, 8, 19, 30],
        colorFrequency1: 'rgba(25,175,244,1)',
        isColor1: true,
        colorFrequency2: 'rgba(230,41,53,1)',
        isColor2: false,
        twoData1: [12450, 11789, 9187, 9173, 7190, 6190, 4200, 2610, 412, 210, 120, 90, 80, 10],
        twoData2: [2450, 1789, 987, 973, 790, 690, 420, 260, 132, 110, 100, 90, 80, 10],
        twoData3: [2450, 1789, 987, 973, 790, 690, 420, 260, 132, 110, 100, 90, 80, 10],
        twoXData: ['省纪委', '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '秦州', '宿迁'],
        dataDisplay: [{
          img: require('../assets/images/icon_user1.png'),
          name: '当前在线用户',
          data: '76'
        }, {
          img: require('../assets/images/icon_user2.png'),
          name: '用户总量',
          data: '0.29亿'
        }, {
          img: require('../assets/images/icon_user3.png'),
          name: '登录总次数',
          data: '223330'
        }],
        dataLeaderboard0: [{
          name: '省纪委',
          value: '1.2万'
        }, {
          name: '泰州',
          value: '1.1万'
        }, {
          name: '南京',
          value: '1.0万'
        }, {
          name: '无锡',
          value: '0.9万'
        }, {
          name: '盐城',
          value: '1,458'
        }, {
          name: '宿迁',
          value: '104'
        }, {
          name: '徐州',
          value: '100'
        }],
        dataLeaderboard1: [{
          name: '玄武区',
          value: '1.2万'
        }, {
          name: '白下区',
          value: '1.1万'
        }, {
          name: '溧水县',
          value: '1.0万'
        }, {
          name: '建邺区',
          value: '0.9万'
        }, {
          name: '鼓楼区',
          value: '1,458'
        }, {
          name: '高淳区',
          value: '104'
        }, {
          name: '雨花区',
          value: '100'
        }],
        dataUseList: [{
          name: '智慧搜索',
          value: '23323232'
        }, {
          name: '调查协作',
          value: '1123232'
        }, {
          name: '智能研判',
          value: '1123232'
        }, {
          name: '话单分析',
          value: '1123232'
        }, {
          name: '账单分析',
          value: '13232'
        }],
        dataPersonalList: [{
          name: '盛安庆',
          value: '3232'
        }, {
          name: '王川',
          value: '1122'
        }, {
          name: '秦志超',
          value: '1002'
        }, {
          name: '吕茂勇',
          value: '893'
        }, {
          name: '程金洪',
          value: '673'
        }]
      }
    },
    methods: {
      accumulateHeight() {
        this.height = this.$refs.carouselHeight.clientHeight - 40;
      },
      frequencyHeight() {
        this.frequencyH = this.$refs.frequencyHeight.clientHeight - 40
      },
      getAreaHeight() {
        this.areaH = this.$refs.areaHeight.clientHeight - 40;
      }
    }
  }
</script>
